<template>
  <div id="wedChat">
	  <!-- page banner -->
	  <div class="page-banner about-banner text-center">
	      <p>为<span class="text-gold">特立独行</span>的游客寻找</p>
	      <h3 class="banner-title">与众不同的酒店</h3>
	  </div>
	  <!-- crumb nav -->
	  <div class="crumb-nav">
	    <div class="fixed-wrapper"><router-link to="/home">首页</router-link><i class="line">&gt;</i><span class="cur">微信精选</span></div>
	  </div>
	  <!-- page content start-->
	  <div class="fixed-wrapper page-content">
		<aboutNav v-bind:page-wechat="true"></aboutNav>
	    <div class="page-title text-center"><div class="page-title-inner"><span>微信精选</span></div></div>
	    <!-- page details -->
	    <div class="page-details" id="about-us-banner">
	    	<div class="inline-loading" v-show="!requred"><img src="./../../assets/images/loading.gif" alt=""></div>
	      	<ul class="newsList after-clear">
				<li class="after-clear" v-for="item in weChatItems">
					<div class="thumb">
						<a 
							v-bind:style="{background: 'url('+ item.banner +') no-repeat center center', backgroundSize: 'cover'}"
							v-bind:href="item.link" target="_blank">
						</a>
					</div>
					<div class="con">
						<h3>
							<a v-bind:href="item.link" target="_blank">{{item.title}}</a>
						</h3>
						<div class="txt"><p>{{item.pageDescription}}</p></div>
						<div class="more-link"><a v-bind:href="item.link" target="_blank">了解更多</a></div>
					</div>
				</li>
	      	</ul>
	    </div>
	  </div>
	  <!-- page content end -->
  </div>
</template>

<script>
import aboutNav from './../common/aboutNav.vue'

export default {
  name: 'news',
  components: {
    aboutNav
  },
  data () {
    return {
      requred: false,
      weChatItems: ''
    }
  },
  mounted: function () {
    this.$http.jsonp('http://www.slhhotels.cn/trail-api/v1/activity/LX/weChat', {}, {
      headers: {
      },
      emulateJSON: true
    }).then(function (response) {
      // 这里是处理正确的回调
      this.weChatItems = response.body
      this.requred = !this.requred
      console.log('response', this.weChatItems)
    }, function (response) {
      // 这里是处理错误的回调
      console.log(response)
    })
  }
}
</script>
